<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="产品列表" width="900px" destroyOnClose>
    <a-input-search placeholder="请输入关键字" @search="onSearch" />

    <a-row>
      <a-col :span="8">
        <div v-if="dataList?.length > 0" class="nav-dropdown-group" v-for="(item, index) in dataList[0]" :key="index">
          <h4 class="nav-dropdown-group-product-name">{{ item.name }}</h4>
          <div class="nav-dropdown-group-product-item" v-if="item.children" v-for="(itemChildren, index1) in item.children" :key="index1">
            <a class="nav-dropdown-group-product-item-name" @click="handleGoProduct(itemChildren.code)">
              {{ itemChildren.name }}
            </a>
          </div>
        </div>
      </a-col>

      <a-col :span="8">
        <div v-if="dataList?.length >= 2" class="nav-dropdown-group" v-for="(item, index) in dataList[1]" :key="index">
          <h4 class="nav-dropdown-group-product-name">{{ item.name }}</h4>
          <div class="nav-dropdown-group-product-item" v-if="item.children" v-for="(itemChildren, index1) in item.children" :key="index1">
            <a class="nav-dropdown-group-product-item-name" @click="handleGoProduct(itemChildren.code)">
              {{ itemChildren.name }}
            </a>
          </div>
        </div>
      </a-col>

      <a-col :span="8">
        <div v-if="dataList?.length >= 3" class="nav-dropdown-group" v-for="(item, index) in dataList[2]" :key="index">
          <h4 class="nav-dropdown-group-product-name">{{ item.name }}</h4>
          <div class="nav-dropdown-group-product-item" v-if="item.children" v-for="(itemChildren, index1) in item.children" :key="index1">
            <a class="nav-dropdown-group-product-item-name" @click="handleGoProduct(itemChildren.code)">
              {{ itemChildren.name }}
            </a>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-empty v-if="dataList?.length == 0" style="margin-top: 60px" />
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, unref } from "vue"
  import { BasicDrawer, useDrawerInner } from "/@/components/Drawer"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { useUserStore } from "/@/store/modules/user"
  import { usePermissionStore } from "/@/store/modules/permission"
  import { listServiceTree } from "/@/views/system/service/list/service.api"
  import { selectWorkspace } from "/@/api/sys/user"
  import { useRouter } from "vue-router"
  const router = useRouter()
  // 声明Emits
  const emit = defineEmits(["success", "register"])
  const { createMessage } = useMessage()
  const permissionStore = usePermissionStore()
  const dataList = ref<any>([])
  const respData = ref<any>([])

  /**
   * 数据
   */
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    setDrawerProps({ confirmLoading: false })
    respData.value = await listServiceTree({})

    processRespData(respData.value)
    // dataList.value = respData
  })

  const processRespData = (data) => {
    dataList.value = []
    for (let index = 0; index < data.length; index++) {
      const element = data[index]
      const dataList = getData(index % 3)
      dataList.push(element)
    }
    console.log(dataList.value)
  }

  const onSearch = (keyWord) => {
    const data: any = []
    respData.value.forEach((e) => {
      const children = e.children
      const dataChildren: any = []
      if (!children) {
        return
      }

      children.forEach((c) => {
        if (c.name.includes(keyWord)) {
          dataChildren.push(c)
        }
      })

      if (dataChildren.length > 0) {
        const newE = Object.assign(e)
        newE.children = dataChildren
        data.push(newE)
      }
    })
    processRespData(data)
  }

  const getData = (index) => {
    let showData = dataList.value[index]
    if (!showData) {
      showData = []
      dataList.value[index] = showData
    }
    return showData
  }

  const handleGoProduct = async (code) => {
    console.log("code", code)
    await selectWorkspace({ serviceCode: code })
    closeDrawer()
    // await router.push({ path: '/'})
    location.reload()
  }
</script>

<style lang="less">
  @import "./index.less";
</style>
